<template>
  <div>
    <SectionBlock title="联系我们" :top="0">
      <p>请留下您的信息，我们将在工作时间尽快联系您。</p>
      <form class="form-row" @submit.prevent="onSubmit">
        <input v-model="name" placeholder="姓名" required />
        <input v-model="phone" placeholder="手机号" pattern="^1\\d{10}$" required />
        <textarea v-model="desc" rows="4" placeholder="需求描述（选填）"></textarea>
        <button class="button" type="submit">提交咨询</button>
      </form>
      <p style="margin-top:10px;font-size:12px">提交即表示您同意我们用于评估与联系的最小化信息使用原则。</p>
    </SectionBlock>

    <SectionBlock title="公司信息">
      <p>地址：合肥市（示例） | 邮箱：contact@example.com | 电话：0551-xxxxxxx</p>
    </SectionBlock>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import SectionBlock from '@/components/SectionBlock.vue';

const name = ref('');
const phone = ref('');
const desc = ref('');

function onSubmit(){
  const payload = { name: name.value, phone: phone.value, desc: desc.value };
  console.log('submit-intent', payload);
  alert('已收到您的咨询，我们会尽快联系您。');
  name.value = '';
  phone.value = '';
  desc.value = '';
}
</script>

<style scoped></style> 